<template>
  <div>
    <NavBar>
      <template v-slot:default>用户登录</template>
    </NavBar>
    <van-image src="https://www.lmonkey.com/_nuxt/img/logo.2a324bb.png"
               width="250px" height="80px" style="margin-left:50px;margin-top: 80px"></van-image>
    <van-form @submit="onSubmit">
      <van-field v-model="email" name="邮箱" label="邮箱" placeholder="请输入你的邮箱"
                 :rules="[{required:true,message:'请填写邮箱'}]"
      ></van-field>
      <van-field v-model="password" name="密码" label="密码" placeholder="请输入密码"
                 :rules="[{required:true,message:'请填写密码'}]"
      ></van-field>
      <div style="color: #42b983;font-size: 14px;margin-left: 10px;margin-top: 10px" @click="$router.push({path:'/register'})">没有账号,立即注册</div>
      <van-button  type="primary" style="width:200px;margin-left: 90px;margin-top: 30px" round
                   native-type="submit">登录</van-button>
    </van-form>
  </div>
</template>

<script>
import {reactive,toRefs,getCurrentInstance} from 'vue'
import {Notify, Toast} from "vant";
import {useRouter} from 'vue-router'
import {useStore} from 'vuex'
export default {
  name: "login",
  setup(){
    const  router=useRouter()
    const store=useStore()
    let form=reactive({
      email:'',
      password:'',
    })
    const {proxy}=getCurrentInstance()
    const onSubmit=()=>{
        proxy.$API.user.login(form).then(res => {
          console.log(res)
            window.localStorage.setItem('token',res.access_token)
          store.commit('setUseInfo',true)
          form.password=''
            setTimeout(()=>{
              Toast.success('登录成功')
              router.push({
                path:'/home'
              },500)
            })
        })
    }
    return{
      onSubmit,
      ...toRefs(form)
    }
  }
}
</script>

<style scoped>
::v-deep .van-field{
  padding:16px;
}
</style>

